<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" href="../css/gouwuche.css" />		
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="../img/fanhui.png"></li>
				<li><p>购物车</p></li>
				<li><input type="button" class="Settlement" value="去结算"></li>
			</ul>
		</div>
		<nav>
			<ul>
				<li>商品数量：1</li>
				<li>应付金额（不含运费）：<span></span></li>
			</ul>
		</nav>
		<div class="gouwu">
			<dl>
				<dt><img src="../img/index02-img.png"></dt>
				<dd>
					<p>0元大抽奖！走秀谢分艾伯特在我</p>
					<p class="four"><span>单价：￥189</span><span>L</span></p>
					<p>数量：<button class="min" name="" type="button" value="-" />-</button> 
							<input class="text_box" name="" type="text" value="1" /> 
							<button class="add" name="" type="button" value="+" />+</button>
							 

				</dd>
			</dl>
			
			<div class="dingwei">
				<img src="../img/p4.png"/>
			</div>
		</div>
		<div class="main"></div>
		<footer>
			<ul class="footer-nav">
				<li >
					<i><img src="../img/tab-shou.png"></i>
					<p>首页</p>
				</li>
				<li>
					<i><img src="../img/tab-fen.png"></i>
					<p>分类</p>
				</li>
				<li class="show">
					<i><img src="../img/tab-gou.png"></i>
					<p>购物车</p>
				</li>
				<li>
					<i><img src="../img/tab-xiu.png"></i>
					<p>我的秀</p>
				</li>
				<li>
					<i><img src="../img/tab-geng.png"></i>
					<p>更多</p>
				</li>
			</ul>
		</footer>


		<script src="../js/jquery-1.11.2.min.js"></script>	
		<script>
			$(function(){
				$('.box ul li:nth-child(1)').click(function(){
					history.back()
				})
				$(document).on('click','.gouwu .dingwei img',function(){
					$(this).parent().stop().slideUp(function(){
						$(".gouwu").remove()
					})
				})
				$(function(){ 
					$(".add").click(function(){ 
					var t=$(this).parent().find('input[class*=text_box]'); 
					t.val(parseInt(t.val())+1) 
					setTotal(); 
					}) 
					$(".min").click(function(){ 
					var t=$(this).parent().find('input[class*=text_box]'); 
					t.val(parseInt(t.val())-1) 
					if(parseInt(t.val())<0){ 
					t.val(0); 
					} 
					setTotal(); 
					}) 
					function setTotal(){ 
					var s=0; 
					$("#tab td").each(function(){ 
					s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); 
					}); 
					$("#total").html(s.toFixed(2)); 
					} 
					setTotal(); 
					
					}) 
				
			})
		</script>
		<script type="text/javascript" src="../js/tiaozhuan.js"></script>
	</body>
</html>
